* {
    margin: 0;
    padding: 0;

}

.detail {
    width: 1200px;
    background: pink;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;

}

/* 详情页左边 */
.detail .left {
    width: 500px;
    height: 500px;

}

.detail .left .up {
    width: 500px;
    height: 420px;

}

.detail .left .up img {
    width: 500px;
    height: 420px;
    vertical-align: top;
    position: absolute;
}

.detail .left .tab {
    display: flex;
    justify-content: space-between;
}

.detail .left .tab div {
    width: 100px;
    height: 80px;
}

.detail .left .tab div img {
    width: 95px;
    height: 80px;
}

/* 放大镜样式 */
.detail .left .tab .active {
    opacity: 0.8;
    cursor: pointer;
}

.left .up .on {
    z-index: 3 !important;
}

.detail .left .up .mask {
    width: 300px;
    height:300px;
    background: rgba(209, 192, 255, 0.3);
    position: absolute;
    z-index: 5;
    display: none;
    pointer-events: none;
}

/* 详情页右边 */
.detail .right {
    width: 680px;
    height: 500px;
    background: pink;
}

.detail .glass {
    width: 500px;
    height: 500px;
    background: blue;
    position: absolute;
    left: 520px;
    display: none;
    overflow: hidden;

}
.detail .glass img{
    position: absolute;
}

/* 右边css布局 */
.detail .right .top{
    font-size: 22px;
    height: 100px;
    line-height: 100px;
    text-align: left;
}
.detail .right .center p:nth-child(1){

text-decoration: line-through;}
.detail .right .center p:nth-child(2){

}

.detail .right .center{
    height: 100px;
    line-height: 50px;
    text-align: left;
    padding-left: 20px;
}
.detail .right .bottom{
    margin-top: 100px;
    display: flex;
    justify-content:space-around ;
}
.detail .right  .bottom button{
    width: 200px;
    height: 50px;
    background: yellow;
    border-radius: 20px;
}